<!-- templates/accounts/profile.html -->
{% extends 'base.html' %}

{% block title %}个人中心 - AI故事生成器{% endblock %}

{% block content %}
<div class="profile-container">
    <div class="profile-header">
        <h1>个人中心</h1>
        <div class="profile-actions">
            <a href="{% url 'user:change_password' %}" class="btn btn-secondary">修改密码</a>
        </div>
    </div>
    
    <div class="profile-content">
        <!-- 头像和基本信息展示 -->
        <div class="profile-info">
            <div class="avatar-section">
                {% if user.head_img %}
                    <img src="{{ user.head_img.url }}" alt="头像" class="avatar-large" id="avatarPreview">
                {% else %}
                    <img src="/static/images/default.jpg" alt="默认头像" class="avatar-large" id="avatarPreview">
                {% endif %}
            </div>
            
            <div class="info-section">
                <div class="info-item">
                    <strong>用户名:</strong> {{ user.username }}
                </div>
                <div class="info-item">
                    <strong>昵称:</strong> {{ user.nickname|default:"未设置" }}
                </div>
                <div class="info-item">
                    <strong>邮箱:</strong> {{ user.email|default:"未设置" }}
                </div>
                <div class="info-item">
                    <strong>注册时间:</strong> {{ user.date_joined|date:"Y年m月d日" }}
                </div>
            </div>
        </div>
        
        <!-- 编辑表单 -->
        <div class="profile-edit">
            <h2>编辑个人信息</h2>
            <div id="profile-message" class="message"></div>
            
            <form id="profileForm" class="profile-form" enctype="multipart/form-data">
                {% csrf_token %}
                
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" value="{{ user.username }}" placeholder="请输入用户名">
                </div>
                
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" name="email" value="{{ user.email|default:'' }}" placeholder="请输入邮箱">
                </div>
                
                <div class="form-group">
                    <label for="nickname">昵称</label>
                    <input type="text" id="nickname" name="nickname" value="{{ user.nickname|default:'' }}" placeholder="请输入昵称" maxlength="11">
                </div>
                
                <div class="form-group">
                    <label for="head_img">头像</label>
                    <input type="file" id="head_img" name="head_img" accept="image/*">
                    <small>支持 JPG、PNG、GIF 格式，建议尺寸 200x200 像素</small>
                </div>
                
                <button type="submit" class="btn">保存修改</button>
            </form>
        </div>
    </div>
</div>

<style>
.profile-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 20px;
}

.profile-header h1 {
    color: #333;
    margin: 0;
}

.profile-actions .btn {
    background: #6c757d;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
}

.profile-actions .btn:hover {
    background: #5a6268;
}

.profile-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.profile-info {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.avatar-section {
    text-align: center;
    margin-bottom: 20px;
}

.avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ddd;
}

.info-section .info-item {
    margin-bottom: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.info-item strong {
    display: inline-block;
    width: 80px;
    color: #495057;
}

.profile-edit {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.profile-edit h2 {
    color: #333;
    margin-bottom: 20px;
}

.profile-form .form-group {
    margin-bottom: 20px;
}

.profile-form label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-weight: 500;
}

.profile-form input[type="text"],
.profile-form input[type="email"],
.profile-form input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.profile-form input[type="file"] {
    padding: 8px;
}

.profile-form small {
    display: block;
    margin-top: 5px;
    color: #6c757d;
    font-size: 12px;
}

.profile-form .btn {
    background: #007bff;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
}

.profile-form .btn:hover {
    background: #0056b3;
}

.message {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    display: none;
}

.message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@media (max-width: 768px) {
    .profile-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .profile-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
</style>
{% endblock %}